import React, {Component} from "react";
import TabBar from "../Public/Components/TabBar";
import {restApiRequest} from "../Public/Api/Public";
import Login from "../Public/Components/Login";
import headImg from "../../images/head.png";
import user_bg from "../../images/user_bg.png";
export default class Index extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            nickname: '小地主~',
            userInfo: null,
            head_image_url: headImg,
            visible: false,
        }
    };

    getUserInfo(sessionkey) {
        let param = {sessionkey: sessionkey};
        let jsonData = restApiRequest.getSign(param);
        this.fetchData(jsonData, 'init');
    }

    componentWillMount() {
        // localStorage.removeItem('sessionkey');
        //判断是否登录
        let sessionKey = localStorage.getItem('sessionkey');
        if (sessionKey === null) {
            this.setState({
                visible: true
            })
        } else {
            this.getUserInfo(sessionKey);
        }
    }

    fetchData(jsonData, type) {
        let url = '/shop/api/getUserInfo';
        restApiRequest.fetchp(url, jsonData).then((response) => {
            if (!response.ok) {
                let error = new Error(response.statusText);
                error.response = response;
                throw error;
            } else {
                return response.json();
            }
        }).then((response_json) => {
            console.log(response_json);
            //登陆成功重新渲染用户信息
            let res_code = response_json.code;
            if (res_code === '0000') {
                let responseData = response_json.data;
                if (responseData.head_image_url) {
                    this.setState({
                        head_image_url: responseData.head_image_url
                    });
                }

                if (responseData.nickname) {
                    this.setState({
                        userInfo: responseData,
                        nickname: responseData.nickname,
                        visible: false,
                    });
                } else {
                    this.setState({
                        userInfo: responseData,
                        nickname: '小地主 ' + responseData.cell_number,
                        visible: false,
                    });
                }

            } else if (res_code === '8888') {
                this.setState({
                    nickname: '小地主',
                    visible: true,
                });
            }
        }).catch((ex) => {
            console.log(ex);
        });
    }

    goUserInfo() {
        let sessionKey = localStorage.getItem('sessionkey');
        if (sessionKey === null) {
            this.setState({
                visible: true,
            })
        } else {
            this.props.history.push({
                pathname: '/Personal',
                state: this.state.userInfo
            })
        }
    }

    goOrder() {
        let sessionKey = localStorage.getItem('sessionkey');
        if (sessionKey === null) {
            this.setState({
                visible: true,
            })
        } else {
            this.props.history.push({pathname: '/OrderIndex'});
        }
    }

    goSetting() {
        let sessionKey = localStorage.getItem('sessionkey');
        if (sessionKey === null) {
            this.setState({
                visible: true,
            })
        } else {
            this.props.history.push({
                pathname: '/Setting',
                state: this.state.userInfo
            })
        }
    }

    goAbout() {
        // let sessionKey = localStorage.getItem('sessionkey');
        // if (sessionKey === null) {
        //   this.setState({
        //     visible: true,
        //   })
        // } else {
        this.props.history.push({
            pathname: '/About',
        })
        // }
    }

    goCoupon() {
        let sessionKey = localStorage.getItem('sessionkey');
        if (sessionKey === null) {
            this.setState({
                visible: true,
            })
        } else {
            this.props.history.push({
                pathname: '/Coupon',
                state: this.state.userInfo
            })
        }
    }

    render() {
        return (
            <div>
                {this.state.visible ? <Login onClosedCallback={
                    () => {
                        this.setState({visible: false});
                    }
                } onLoginCallback={(val) => {
                    this.getUserInfo(val)
                }}/> : null}


                <section className="user-top-wrap">

                    <img src={user_bg} className="user-top-bg"/>
                    <section className="user-top-box">
                        <img className="user-top-head" src={this.state.head_image_url}/>
                        <section className="user-top-title">
                            <p>{this.state.nickname}</p>
                            <p>快乐的地主玩家，欢迎你~</p>
                        </section>
                    </section>

                </section>

                <NavItem
                    icon={'#icon-ico_order_user'}
                    title={'我的订单'}
                    text={'查询全部订单和使用情况'}
                    nav_state={this.state.userInfo?this.state.userInfo.user_order_amount+'个待使用':'0个待使用'}
                    onPress={()=>this.goOrder()}
                    style={{
                        paddingTop: '1rem'
                    }}
                />

                <div className="user-line"/>

                <NavItem
                    icon={'#icon-ico_coupons'}
                    title={'我的券'}
                    text={'查询全部优惠券使用情况'}
                    nav_state={this.state.userInfo?this.state.userInfo.user_coupon_amount+'个待使用':'0个待使用'}
                    onPress={()=>this.goCoupon()}
                />

                <NavItem
                    icon={'#icon-ico_settings_user'}
                    title={'个人设置'}
                    text={'修改或编辑您的资料'}
                    onPress={()=>this.goSetting()}
                    style={{
                        marginTop: '.32rem'
                    }}
                />

                <div className="user-line"/>

                <NavItem
                    icon={'#icon-ico_profile_user'}
                    title={'关于地主校园'}
                    text={'了解地主校园背后的故事'}
                    onPress={()=>this.goAbout()}
                />

                <TabBar
                    UserActive={true}
                    OrderLink={'/OrderIndex'}
                    HomeLink={'/'}
                />
            </div>
        )
    }
}

class NavItem extends Component {

    render() {
        return (
            <section
                className="user-nav-wrap"
                style={this.props.style}
                onTouchEnd={this.props.onPress}
            >
                <section className="user-nav-left">
                    <svg className="user-nav-icon">
                        <use xlinkHref={this.props.icon}></use>
                    </svg>
                    <section className="user-nav-box">
                        <p>{this.props.title}</p>
                        <p>{this.props.text}</p>
                    </section>
                </section>
                <section className="user-nav-right">
                    <span className="user-nav-state">{this.props.nav_state}</span>
                    <svg className="user-nav-arrow">
                        <use xlinkHref='#icon-ico_more_arrow1'></use>
                    </svg>
                </section>
            </section>
        )
    }

}



